<template>
  <div class="schedule-table" v-loading="loadings">
    <div class="sace_input">
      <div>
        <a-form size="small" :model="pageData" layout="inline">
          <a-form-item label="查询日期">
            <a-date-picker
              popup-container="html"
              class="bacClass"
              v-model="dropDownData1"
              style="width: 200px"
            />至<a-date-picker
              popup-container="html"
              class="bacClass"
              v-model="dropDownData2"
              style="width: 200px"
            />
          </a-form-item>
          <a-form-item label="设备编号">
            <a-input
              class="bacClass"
              :style="{ width: '150px' }"
              v-model="pageData.facilityCode"
              allow-clear
            />
          </a-form-item>
        </a-form>
      </div>

      <div>
        <el-button type="primary" :icon="Search" @click="searchClick">查询</el-button>
      </div>
      <div>
        <div>
          <div class="bissBoosNo1"></div>&nbsp;
          <div> 未派工</div>
        </div>
        <div>
          <div class="bissBoosNo2"></div>&nbsp;
          <div> 已派工</div>
        </div>
        <div>
          <div class="bissBoosNo3"></div>&nbsp;
          <div> 已完成</div>
        </div>
      </div>
    </div>
    <!-- <table cellpadding="0" border="0">
            <thead>
                <tr>
                    <th class="jtCss">机台/时间</th>
                    <th v-for="item in weekDay" class="week-title">
                        {{ item }}
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in duration">
                    <td class="duration-title">{{ item.facilityName }}</td>
                    <td v-for="n in weekDay" style="overflow:auto">
                        <div style="height: 49%"
                            v-for="i in courdList[n + ',' + item.facilityName]">
                            <div style="height: 80%;display: flex;align-items: center;"
                                :class="i?.state == 1 ? 'duration-cour' : i?.state == 2 ? 'duration-cour2' : i?.state == 3 ? 'duration-cour3' : ''">
                            </div>
                        </div>
                        <div style="height: 49%" v-if="!courdList[n + ',' + item.facilityName]">
                            <div style="height: 80%;display: flex;align-items: center;"
                                class="duration-cour4">
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table> -->
    <div
      style="width: 100%; height: calc(100% - 100px); overflow: auto"
      v-show="tableDataList.length !== 0"
    >
      <AgGridVuesCopys
        :rowHeight="'auto'"
        :headerHeight="33"
        :suppressCopyRowsToClipboard="true"
        rowSelection="multiple"
        @grid-ready="gridReady"
        style="height: 100%; margin-left: 5px"
        :defaultColDef="defaultColDef"
        class="ag-theme-alpine"
        :rowData="tableDataList"
        :columnDefs="tc"
        :localeText="localeText1"
        :getRowHeight="getRowHeightCallback"
        :getRowStyle="getRowStyleCallback"
      >
      </AgGridVuesCopys>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, toRefs, reactive, onMounted } from 'vue'
  import { Search } from '@element-plus/icons-vue'
  import { post } from '@/api/http'
  import { Message } from '@arco-design/web-vue'
  import { baseURL } from '@/api/axios.config'
  import { localeText } from '@/api/aggridZw'
  const localeText1: any = ref(localeText)
  onMounted(() => {
    select()
  })

  function formatDateTime(date: any, format: any) {
    const o = {
      'M+': date.getMonth() + 1, // 月份
      'd+': date.getDate(), // 日
      'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
      'H+': date.getHours(), // 小时
      'm+': date.getMinutes(), // 分
      's+': date.getSeconds(), // 秒
      'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
      S: date.getMilliseconds(), // 毫秒
      a: date.getHours() < 12 ? '上午' : '下午', // 上午/下午
      A: date.getHours() < 12 ? 'AM' : 'PM', // AM/PM
    }
    if (/(y+)/.test(format)) {
      format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
    }
    for (let k in o) {
      if (new RegExp('(' + k + ')').test(format)) {
        format = format.replace(
          RegExp.$1,
          RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
        )
      }
    }
    return format
  }

  const loadings = ref(false)

  const selectType = ref(1)

  const weekDay: any = ref([])

  const duration: any = ref([])

  const courdList: any = ref()

  const tableDataList: any = ref([])
  const gridOption = ref()
  const gridReady = (params: any) => {
    gridOption.value = params.api
  }
  const getRowHeightCallback = (params: any) => {
    let max = 0
    for (const key in params.data) {
      if (key != 'machine') {
        max = max > params.data[key].length ? max : params.data[key].length
      }
    }
    const height = max * 25 + 5

    return height
  }
  const getRowStyleCallback = (params:any)=>{
     // 为奇数行和偶数行设置不同的背景颜色
     if (params.node.rowIndex % 2 === 0) {
        return { background: '#f0f0f0' }; // 偶数行背景色
      } else {
        return { background: '#ffffff' }; // 奇数行背景色
      }
  }
  const defaultColDef = {
    sortable: false,
    resizable: true,
    filter: false,
    flex: 1,
  }
  const tc = ref([])

  const pageData: any = reactive({
    dropDownData1: formatDateTime(new Date(), 'yyyy-MM-dd'),
    dropDownData2: formatDateTime(
      new Date(Number(new Date().getTime()) + 60 * 1000 * 60 * 24 * 7),
      'yyyy-MM-dd'
    ),
    facilityCode:''
  })

  const { dropDownData1, dropDownData2 } = toRefs(pageData)

  const searchClick = () => {
    select()
  }

  function select() {
    loadings.value = true
    post({
      url: 'zcTemRepair/repairSubscribe/ReportRepairSubscribe',
      data: {
        timeBegin: pageData.dropDownData1,
        timeEnd: pageData.dropDownData2,
        facilityCode: pageData.facilityCode,
      },
    })
      .then((res: any) => {
        if (res.code == 200) {
          weekDay.value = res.data.list.typeTime.typeTime
          duration.value = res.data.list.facilityName
          courdList.value = res.data.list.sumList
            //start

          const renderData = []
          const renderColumn = [
            {
              headerName: '机台\\时间',
              field: 'machine',
              width: 150,
              cellStyle: { backgroundColor: '#fdf1cc' } 
            },
          ]
          for (const date of res.data.list.typeTime) {
            const rednerObj = {
              headerName: date,
              field: date,
              cellRenderer: {
                template: `<div style="height: 49%"
                 >
                    <div style="height: 20px;display: flex;align-items: center;" v-for="(item,key) in list"
                   :class="{
                   'duration-cour':item.state==1,
                   'duration-cour2':item.state == 2,
                   'duration-cour3':item.state == 3,
                 }"></div>
                 <div style="height: 20px;display: flex;align-items: center;" v-if="isShow"
                   class="duration-cour4">
                 
              </div>
            </div>`,
              setup(props: any) {
                  let  list:any  = ref(null)
                  const machine = props.params.data.machine
                  if (props.params.data[date]) {
                    list.value = props.params.data[date]
                  }else{
                    list.value = []
                  }
                 
                  console.log(list.value);
                  
                  for (const key in list.value) {
                  
                    console.log(machine + ',' + list.value[key].timeType);
                    
                  }
                  console.log();
                  const isShow = computed(()=>{
                    return list.value.length ===0
                  })
                  console.log(isShow);
                  
                return {
                  list,
                  machine,
                  isShow,
                }
              },
              }
              
            }
            renderColumn.push(rednerObj)
          }
          tc.value=renderColumn
          gridOption.value.setColumnDefs(renderColumn)
          const obj = {}
          for (const key in res.data.list.sumList) {
            const date = key.split(',')[0] //日期
            const machine = key.split(',')[1] //机台
            if (obj[machine]) {
              obj[machine][date] = res.data.list.sumList[key]
            } else {
              obj[machine] = {}
              obj[machine][date] = res.data.list.sumList[key]
            }
          }
          console.log(obj,"obj");
          
          for (const machine in obj) {
            const row = {}
            row.machine = machine
            for (const date in obj[machine]) {
              row[date] = obj[machine][date]
            }
            renderData.push(row)
          }
          tableDataList.value = renderData
          gridOption.value.setRowData(renderData)
          //end
          loadings.value = false
        } else {
          Message.error(res.message)
          weekDay.value = []
          duration.value = []
          courdList.value = []
          tableDataList.value =[]
        }
      })
      .finally(() => {
        loadings.value = false
      })
  }
</script>
<style lang="less" scoped>
  .schedule-table {
    width: 100%;
    height: 100%;
    background-color: #fff;
    overflow: auto;

    .sace_input {
      width: 80%;
      display: flex;
      justify-content: space-between;
      height: 80px;
      align-items: center;
      margin-top: 10px;
      position: sticky;
      left: 0;

      div:last-of-type {
        display: flex;

        div {
          width: 100px;
          display: flex;
          font-family: Microsoft Yahei;
          font-size: 16px;
          font-weight: 500;

          .bissBoosNo1 {
            width: 20px;
            height: 18px;
            border-radius: 2px;
            background-color: #409eff;
            box-shadow: 1px 1px 1px 0.5px rgba(0, 0, 0, 0.2);
          }

          .bissBoosNo2 {
            width: 20px;
            height: 18px;
            border-radius: 2px;
            background-color: #79ff40;
            box-shadow: 1px 1px 1px 0.5px rgba(0, 0, 0, 0.2);
          }

          .bissBoosNo3 {
            width: 20px;
            height: 18px;
            border-radius: 2px;
            background-color: #44c553;
            box-shadow: 1px 1px 1px 0.5px rgba(0, 0, 0, 0.2);
          }
        }
      }
    }

    table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      border-color: #ccc;
      min-height: 20vh;
      max-height: 80vh;

      thead {
        position: sticky;
        top: 0px;
        background-color: white;
        z-index: 10;
      }

      tbody td:first-child {
        position: sticky;
        left: 0px;
        top: 60px;
      }

      .jtCss {
        position: sticky;
        left: 0px;
        z-index: 999;
        background-color: #fff;
        width: 100px;
      }

      th,
      td {
        text-align: center;
        border: 1px solid #ccc;
      }

      th {
        height: 60px;
        width: 100px;
      }

      td {
        height: 60px;
        cursor: pointer;
      }
    }
  }

  .week-title {
    color: #004085;
    background-color: #cce5ff;
  }

  .duration-title {
    color: #856404;
    background-color: #fff3cd;
    width: 100px;
    z-index: 998;
  }

  :deep(.duration-cour){
    background-color: #409eff !important;
    width: 100%;
    height: 40%;
    border-radius: 10px;
    margin-top: 3px;
  }

  :deep(.duration-cour2) {
    background-color: #79ff40 !important;
    width: 100%;
    height: 40%;
    border-radius: 10px;
    margin-top: 3px;
  }

  :deep(.duration-cour3) {
    background-color: #44c553 !important;
    width: 100%;
    height: 40%;
    border-radius: 10px;
    margin-top: 3px;
  }
  :deep(.duration-cour4) {
    background-color: #beb7b7 !important;
    width: 100%;
    height: 40%;
    border-radius: 10px;
    margin-top: 3px;
  }

  .contentDiv {
    display: flex;
    justify-content: space-between;

    .contentDiv2 {
      width: 145px;
      height: 100%;
      border: 1px solid #ccc;
      border-radius: 5px;

      .contentDivTile {
        font-family: Microsoft Yahei;
        font-size: 16px;
        font-weight: 500;
        width: 143px;
        height: 15%;
        text-align: center;
        color: #409eff;
        border-bottom: 1px dashed #ccc;
      }

      .contentDivTile2 {
        font-family: Microsoft Yahei;
        font-size: 14px;
        font-weight: 500;
        width: 143px;
        height: 20px;
        text-align: center;
        border-bottom: 1px dashed #ccc;
      }
    }
  }

  .contentDivNo1 {
    width: 450px;
    height: 25px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    display: flex;

    .contentDivNo2 {
      font-family: Microsoft Yahei;
      font-size: 16px;
      font-weight: 500;
      color: #409eff;
      position: relative;
      left: 15px;
      line-height: 22px;
    }

    .contentDivNo3 {
      font-size: 14px;
      font-weight: 500;
      position: relative;
      left: 30px;
    }
  }
</style>
